<template>
  <div  class="comment-reply">
      <!-- 评论回复弹出层 -->
  <!-- 导航栏 -->

    <!-- @click="$emit('close')" #控制弹出显示与否 -->
<van-nav-bar  :title="comment.reply_count > 0 ? `${comment.reply_count}条回复` : '暂无回复'">
  <van-icon
     slot="left"
     name="cross"
     @click="$emit('close')" 
  />
</van-nav-bar>
<!-- /导航栏 -->

 <!-- 给这几个布局添加可以滚动的容器 -->
<div class="scroll-wrap"> 
   
<!-- 当前评论项 -->
 	<comment-item :comment="comment" />
<!-- /当前评论项 -->

 <van-cell title="所有回复" />
<CommentList :source='comment.com_id' :list='list' type='c' />

 </div>

  <!-- 发布评论 -->
    <div class="post-wrap">
      <van-button class="post-btn" size="small" round @click='isPostShow = true'>写评论</van-button>
    </div> 
    <!-- /发布评论 -->
   <!-- 发布评论的弹层 -->
    <van-popup v-model="isPostShow" position="bottom">
    <CommentPost type="c" @show='onPost'  :target="comment.com_id" />
    </van-popup>
  </div>
  
</template>

<script>
import CommentItem from './comment-item'
import CommentList from './comment-list'
import CommentPost from './comment-post'
export default {
 name: 'CommentReply',
 components: {
      CommentItem,
      CommentList,
      CommentPost
 
 },
// 当前评论数据
 props: {
  comment: {
    type: Object,
    required: true
  }
},

data () {
    return {
        isPostShow:false,
        list:[]
    }
},
methods: {

    onPost(index){

         // 更新回复的数量
        this.comment.reply_count++
        // 关闭弹层
        this.isPostShow=false,
        this.list.unshift(index.new_obj)


    }
}
}
</script>

<style scoped lang="less">
.post-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-top: 1px solid #d8d8d8;
  .post-btn {
    width: 60%;
  }
}
.scroll-wrap {
  position: fixed;
  top: 92px;
  left: 0;
  right: 0;
  bottom: 88px;
  overflow-y: auto; 
}
</style>